<template>
  <div class="p20 h100 white-bg">
 
    <dragForm :customoComponents="customoComponents" @save="save"></dragForm>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRoute } from "vue-router";
import {
 ComponentType
  } from "element-easy-form";
const route = useRoute();
import {custom} from './custom'
const customoComponents = ref([
  ...custom
])
const elementEasyFormRef = ref<any>();
const elementFormrenderRef = ref<any>();
const formType = ref<any>('');
const save = (data) =>{
}
const handleCheck = (e:any)=>{
}
const dragFormJson = ref({
  "formJson": [
    {
      "label": "江芳",
      "type": "COMPONENT",
      "formItemAttrs": {},
      "attrs": {
   
        "text-color": "#BF4545",
        "fill": "#0915F8",
        "label": "江芳",
      },
      "rules": [],
         events:{
      change:handleCheck
    },
      "prop": "KennethJoseWhite",
      "componentName": "ElCheckboxGroup",
      "children": [
        {
          "componentName": "ElCheckbox",
          "label": "选项1",
        },
        {
          "componentName": "ElCheckbox",
          "label": "选项2",
        }
      ]
    }
  ],
  "model": {
  }
})
const formJson = ref<any>({
  "formJson": [
    {
      "attrs": {
        "gutter": 0,
        "justify": "start",
        "align": "middle"
      },
      "type": "LAYOUT",
      "componentName": "ElRow",
      "children": [
        {
          "componentName": "ElCol",
          "attrs": {
            "span": 12,
            "offset": 0,
            "push": 0,
            "pull": 0
          },
          "children": [
            {
              "label": "马娜",
              "type": "COMPONENT",
              "formItemAttrs": {},
              "attrs": {},
              "rules": [ {
          "required": true,
          "message": "数据",
          "trigger": "change"
        }],
              "prop": "MelissaAmyLewis",
              "componentName": "ElCheckboxGroup",
              "children": [
                {
                  "componentName": "ElCheckbox",
                  "label": "选项1"
                }
              ]
            }
          ]
        },
        {
          "componentName": "ElCol",
          "attrs": {
            "span": 12,
            "offset": 0,
            "push": 0,
            "pull": 0
          },
          "children": [
            {
              "label": "雷超",
              "type": "COMPONENT",
              "formItemAttrs": {},
              "attrs": {},
              "rules": [],
              "prop": "KarenJessicaRodriguez",
              "componentName": "ElCheckboxGroup",
              "children": [
                {
                  "componentName": "ElCheckbox",
                  "label": "选项1"
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  "model": {},
  "formAttrs": {
    "hide-required-asterisk": false,
    "inline-message": false,
    "status-icon": false,
    "scroll-to-error": false
  }
});
const count = ref(0);
const state: any = reactive({
  activeDate: "",
});

onMounted(() => {
});
</script>

<style   lang="scss">
.drag-form .drag-form-content{
  background-color: transparent;

}
 .drag-form .el-collapse-item button{
    padding-left: 5px !important;
  }
.drag-form .drag-form-content .drag-form-content-tool{
    border-bottom: 1px solid var(--el-border-color);
}

 </style>
